<template>
  <div class="upImgList">
    <div
      :class="index % 3 == 0 ? 'noLeft upImgItem imgCont' : 'upImgItem imgCont'"
      :key="index"
      v-for="(item, index) in imgArr"
    >
      <img :src="item.img" />
      <div
        @click="delImgFn(index)"
        class="delIcon iconfont icon-shanchu-05"
      ></div>
    </div>
    <div
      :class="
        imgArr.length % 3 == 0 ? 'noLeft upImgItem addImg' : 'upImgItem addImg'
      "
    >
      <div class="upImg iconfont icon-xiangji2"></div>
      <input
        accept="image/*"
        multiple
        ref="file"
        type="file"
        @change="upImgFn($event)"
      />
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      imgArr: this.propImg,
    };
  },
  props: {
    icon: {},
    propImg: {},
  },
  methods: {
    delImgFn(index) {
      this.imgArr.splice(index, 1);
      this.$emit("successCropper", this.imgArr);
    },
    upImgFn(e) {
      let fileArr = e.target.files;
      for (let i = 0; i < fileArr.length; i++) {
        setTimeout(() => {
          var fileObj = fileArr[i]; //获得文件上传的输入框的文件流
          var formData = new FormData(); // 可以增加表单数据
          formData.append("file", fileObj);
          $.ajax({
            url: this.apis + "/common/Upload/UpImg",
            dataType: "json",
            type: "post",
            processData: false,
            contentType: false,
            data: formData,
            success: (res) => {
              if (res.code == 1) {
                this.imgArr.push({ img: res.data.src });
                this.$emit("successCropper", this.imgArr);
              } else {
              }
            },
          }).catch(() => {});
        });
      }
    },
  },
  mounted() {},
  created() {},
};
</script>

<style scoped lang="less">
.upImgList {
  padding-top: 1rem;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  .upImgItem {
    width: 30%;
    overflow: hidden;
    margin-left: 5%;
    height: 5rem;
    border-radius: 0.25rem;
    background-color: #f7f8fa;
    position: relative;
    margin-bottom: 1rem;
    .upImg {
      width: 100%;
      height: 100%;
      text-align: center;
      line-height: 5rem;
      font-size: 2rem;
      color: #ccc;
    }
    input {
      width: 100%;
      height: 100%;
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
    }
    img {
      width: 100%;
    }
    .delIcon {
      position: absolute;
      top: 0;
      right: 0;
      font-size: 1rem;
      color: #fff;
      width: 1.5rem;
      height: 1.5rem;
      background-color: black;
      text-align: center;
      line-height: 1.5rem;
      border-radius: 0 0 0 0.75rem;
    }
  }
  .imgCont {
    font-size: 0;
  }
  .addImg {
    max-height: 5rem;
    .upImg {
      max-height: 5rem;
    }
  }
  .noLeft {
    margin-left: 0;
  }
}
</style>
